<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Runface动态精准护肤</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" href="css/loaders.css">
		<link rel="stylesheet" href="css/mui.css">
		<link rel="stylesheet" type="text/css" href="font_icon/iconfont.css"/>
		<style>
			html,
			body {background-color: #efeff4;}
			span.mui-icon {font-size: 14px;/*color: #007aff; margin-left: -15px; */padding-right: 10px;}
			.mui-off-canvas-left {color: #fff;}
			.title {margin: 35px 15px 10px;}
			.title+.content {margin: 10px 15px 35px;color: #bbb;text-indent: 1em;font-size: 14px;line-height: 24px;}
			input {color: #000;}
			.mui-bar{background-color: #ff8dae;}
			.mui-off-canvas-left, .mui-off-canvas-right{background: #FFFFFF;}
			.mui-table-view-inverted{background: #ffffff;}
			.mui-table-view-inverted .mui-table-view-cell:after{background-color: #a4b9fa;}
			.mui-table-view-inverted:before{background-color: #FFFFFF;}
			.mui-table-view-inverted:after{background-color: #FFFFFF;}
			.mui-table-view-cell{padding: 13px 15px;color: #595555;}
			.aye{color:#70b2f9;}
			.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable{background-color: #FFFFFF;}
			.mui-card{border-radius: 20px;}
			/*.mui-scroll-wrapper{position: static;}
			.mui-scroll{position: static;}*/
			.mui-bar.mui-bar-tab{
				background-color: #ff8dae;
			}
			.mui-bar.mui-bar-tab .mui-tab-item.mui-active{
				color: #FFFFFF;
			}
		</style>
	</head>

	<body>
		
		<!-- preloader -->
		<div class="preloader">
			<div class="spinner"></div>
		</div>
		<!-- end preloader -->
		
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!--侧滑菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-left">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- <div class="title">&emsp;</div> -->
						<!--侧栏图片-->
						<div class="content">
							<div class="celan_div">
								<div class="celan_div1">
									<img class="celan_img" src="images/abuts.png" />
								</div>
								<div id="loginInfo" style="z-index: 9999;">
									<center><img class="celan_img1" src="images/logo.png" >
										<h5 style="margin-top: ;color: #939eed;"><center id="username">您尚未登录，请登录</center></h1>
										<span style="display: none;" id="detail"><p>获赞：0&nbsp;&nbsp;文章：0</p></span>
									</center>
								</div>
							</div>
						</div>
						<!--侧栏图片结束 -->
						
								<div class="title" style="margin-bottom: 25px;">&emsp;</div>
								<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
									<li class="mui-table-view-cell" >
										<a class="mui-navigate-right" href="template/News/Ordernews.html">
											<span class="celan_sp3">●</span>&emsp;淘宝订单模板
										</a>
									</li>
									<li class="mui-table-view-cell" >
										<a class="mui-navigate-right" href="template/News/Shopping-list.html">
											<span class="celan_sp6">●</span>&emsp;消费记录模板
										</a>
									</li>
									<li class="mui-table-view-cell" >
										<a class="mui-navigate-right" href="template/Other/business2-card.html">
											<span class="celan_sp4">●</span>&emsp;个人介绍模板
										</a>
									</li>
									<li class="mui-table-view-cell" >
										<a class="mui-navigate-right" href="template/News/trip.html">
											<span class="celan_sp5">●</span>&emsp;行程界面模板
										</a>
									</li>
									<li class="mui-table-view-cell" >
										<a class="mui-navigate-right" href="template/News/trip-details.html">
											<span class="celan_sp1">●</span>&emsp;行程详情模板
										</a>
									</li>
									<li class="mui-table-view-cell" >
										<a class="mui-navigate-right" href="template/Article/read.html">
											<span class="celan_sp6">●</span>&emsp;文章详情模板
										</a>
									</li>
									<li class="mui-table-view-cell">
										<a class="mui-navigate-right" href="template/Login/login1.html">
										<span class="celan_sp5">●</span>&emsp;登入模板
										</a>
									</li>
									<li class="mui-table-view-cell">
										<a class="mui-navigate-right" href="template/News/schedule.html"> 
											<span class="celan_sp4">●</span>&emsp;会议通知模板
										</a>
									</li>
									<li class="mui-table-view-cell">
										<a class="mui-navigate-right" href="template/News/newstwo.html">
											<span class="celan_sp3">●</span>&emsp;日程通知模板
										</a>
									</li>
									<li class="mui-table-view-cell">
										<a class="mui-navigate-right" href="setting.html">
											<span class="celan_sp1">●</span>&emsp;账户设置模板
										</a>
									</li>
									<li class="mui-table-view-cell">
										<a class="mui-navigate-right" href="template/Other/newtwoadd.html">
											<span class="celan_sp4">●</span>&emsp;新建日程模板
										</a>
									</li>
									<li class="mui-table-view-cell">
										<a class="mui-navigate-right" href="template/Other/other-business-card.html">
											<span class="celan_sp5">●</span>&emsp;公司职位名片模板
										</a>
									</li>
									<li class="mui-table-view-cell">
										<a class="mui-navigate-right" href="template/Other/business2-card.html">
											<span class="celan_sp3">●</span>&emsp;个人介绍模板
										</a>
									</li>
									<li class="mui-table-view-cell">
										<a class="mui-navigate-right" href="template/Other/other-emtmenu.html">
											<span class="celan_sp6">●</span>&emsp;O2O商品外卖模板
										</a>
									</li>
									<li class="mui-table-view-cell">
										<a class="mui-navigate-right" href="template/Other/other-Personal-Center.html">
											<span class="celan_sp2">●</span>&emsp;O2O个人中心模板
										</a>
									</li>
									<li class="mui-table-view-cell">
										<a class="mui-navigate-right" href="info.html">
											<span class="celan_sp1">●</span>&emsp;关于
										</a>
									</li>
									
								</ul>
							
					</div>
				</div>
			</aside>
			<!-- 菜单容器 -->
			<aside class="mui-off-canvas-right" id="offCanvasRightSide">
						<div class="mui-scroll-wrapper">
						  <div class="mui-scroll">
							<!-- 菜单具体展示内容 -->
								
						  </div>
						</div>
			</aside>
			<!--主界面部分-->
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" style="color: #FFFFFF;"></a>
					<!-- <a class=" mui-btn mui-btn-link mui-pull-right index_title"  id="update" href="info.html" style="color: #FFFFFF;">检测更新</a> -->
					<a href="#offCanvasRightSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right" style="color: #FFFFFF;"></a>
					<h1 class="mui-title" style="color: #FFFFFF;">Runface</h1>
				</header>
				<nav class="mui-bar mui-bar-tab">
					<a class="mui-tab-item mui-active">
						<span class="mui-icon mui-icon-home-filled"></span>
						<span class="mui-tab-label">主页</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon iconfont icon-icon2"></span>
						<span class="mui-tab-label">分类</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon iconfont icon-paizhao"></span>
						<span class="mui-tab-label">测一测</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon iconfont icon-dingzhi"></span>
						<span class="mui-tab-label">定制</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon iconfont icon-wode"></span>
						<span class="mui-tab-label">我的</span>
					</a>
				</nav>
				
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-card">
				<div class="mui-card-content" ><center>
					<img src="images/userbg.png" alt="" width="70%"/><br></center>
				</div>
				<div class="mui-card-footer">
					<div class="about_div">
						<center>
							<div class="about_div1">
								<span>UI版本</span><br>
								<span>0.1</span>
								<span>0.1</span>
							</div>
							<div class="about_div2">
								<span>Designer</span><br>
								<span>Huangruifu</span>
							</div>
							<div class="about_div3" >
								<div class="about_div4"><b>UI说明</b></div>
								<div>
									<br>
									<p>2018.7.29</p>
									<p>1.适配Andriod 9.0</p>
									<p>2.适配状态栏变色</p>
									<p>3.支持在线更新</p>
									<p style="color: #8B0000;">喜欢的大佬们可以套模板修改哦</p>
									<p style="color: #8B0000;">如果侵权请联系作者枫瑞博客删除</p>
								</div>
							</div>
						</center>
					</div>
				</div>
			</div>
				</div>
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		
		<!-- 脚本 -->
		<script src="js/mui.js"></script>
		<script src="js/app.js">
			
		</script>
		<script>
			mui.init()
			 //侧滑容器父节点
			var offCanvasWrapper = mui('#offCanvasWrapper');
			 //主界面容器
			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
			 //主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			mui('#offCanvasRightSide').scroll();
			 //实现ios平台原生侧滑关闭页面；
			if (mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
			//界面所有a标签跳转指定href
// 			mui('body').on('tap','a',function(){
// 				document.location.href=this.href;
// 			});
			//退出关闭
			mui.oldback = mui.back;
				var clickNum = 0;
				mui.back = function(event){
				   clickNum++;
				   if(clickNum > 1){
				       plus.runtime.quit();
				   }else{
				       mui.toast("再按一次退出应用.");
				   }
				   setTimeout(function(){
				       clickNum = 0
				   },1000);
				        return false;
				};
		//刷新用户信息
		function refreshUserInfo() {
			var user = app.getUserGlobalInfo();
			console.log("refresh======="+JSON.stringify(user))
			
			if (user != null) {
				var faceImage = user.faceImage;
				var nickname = user.nickname;
				var username = user.username;
				
				var span_nickname = document.getElementById("span_nickname");
				var span_username = document.getElementById("span_username");
				
				span_username.innerHTML = username;
				
				if (app.isNotNull(faceImage)) {
					var img_my_face = document.getElementById("img_my_face");
					img_my_face.src = app.imgServerUrl + faceImage;
				}
			}
			
		}	
		
		var loginInfo=document.getElementById("loginInfo");
		loginInfo.addEventListener('tap',function(){
			var userInfo = app.getUserGlobalInfo();
			console.log("userInfo===="+userInfo);
			if(userInfo!=null){
				mui.openWindow('me-setting.html','me-setting.html');
			}else{
				// console.log("userInfo===="+userInfo);
				mui.openWindow('login.html','login.html');
			}
			
		})
  			
		function plusReady(){
			// 设置系统状态栏背景
			plus.navigator.setStatusBarBackground( "#ff8dae" );
			// 设置系统状态栏样式为浅色文字
			plus.navigator.setStatusBarStyle( "UIStatusBarStyleBlackOpaque" );
			
			var meWebview = plus.webview.currentWebview();
			meWebview.addEventListener("show", function() {
				refreshUserInfo();
			});
			// 判断本地是否保存有user信息
			var userInfo = app.getUserGlobalInfo();
			if(userInfo!=null){
				
				// 获得当前的webview，刷新当前用户信息
				
				
				var loginInfo=document.getElementById("loginInfo");
				var username=document.getElementById("username");
				var detail=document.getElementById("detail");
				username.innerHTML='welcome,'+userInfo.username;
				// console.log(JSON.stringify(userInfo));
				detail.style.display='block';
				// console.log(detail.style.display);
			}
			
			}
			if(window.plus){
			plusReady();
			}else{
			document.addEventListener("plusready",plusReady,false);
			
		};
		mui.plusReady(function(){
			refreshUserInfo();
		})
		
		</script>
		<script src="js/jquery.min.js"></script>
		<script src="js/main.js"></script>
	</body>

</html> 